<template>
<u-navbar title="注册" @leftClick="goLink('/pages/login/login')"> </u-navbar>	
	<u--form labelPosition="left" :model="formState" :rules="rules" ref="loginform" class="form_state">
		<u-form-item prop="mobile" borderBottom >
			<up-input v-model="formState.mobile" placeholder="请输入绑定银行的手机号" class="input_item">
				<template #prefix>
					<text style="margin-right: 15px;">手机号</text>
				</template>
			</up-input>
		</u-form-item>
		
		<u-form-item prop="nickname" borderBottom >
			<up-input v-model="formState.nickname" placeholder="请输入真实姓名" class="input_item">
				<template #prefix>
					<text style="margin-right: 25px;">姓 名</text>
				</template>
			</up-input>
		</u-form-item>

		<u-form-item prop="password" borderBottom >
			<up-input v-model="formState.password" password placeholder="请输入密码" class="input_item">
			<template #prefix>
				<text style="margin-right: 15px;width: 42px;" >密码</text>
			</template>
			</up-input>
		</u-form-item>

		<u-form-item prop="invite" borderBottom >
			<up-input v-model="formState.invite" placeholder="请输入邀请码" class="input_item">
				<template #prefix>
					<text  style="margin-right: 15px;">邀请码</text>
				</template>
			</up-input>
		</u-form-item>





		<u-form-item borderBottom>
			<view @click="submitForm" class="submit_btn">立即注册</view>
		</u-form-item>

		<u-form-item borderBottom>
			<view class="center_view">已有账户 ？<text @click="jumpPage('/pages/login/login')" style="color: #FA4347;"> 立即登录</text> </view>
		</u-form-item>
	</u--form>

</template>

<script setup>
	import { jumpPage } from '@/common/hooks.js'
	import { registerApi } from '@/common/apis.js'
	import { reactive, ref, computed, onMounted} from 'vue';
	import { useStore } from 'vuex';
	import { onLoad } from "@dcloudio/uni-app";
	const loginform = ref()
	const store = reactive(useStore())
	const state = reactive({
	})
	const formState = reactive({
		mobile: "",
		password: "",
		invite: "",
	})
	const rules = reactive({
		'mobile':  [
		{
			required: true, 
			message: '请输入手机号',
			trigger: ['blur'],
		},
		{
			validator: (rule, value, callback) => {
				return uni.$u.test.mobile(value);
			},
			message: '手机号码不正确',
			trigger: ['blur'],
		}
	],
		'password': {
			type: 'string',
			required: true,
			message: '请填写密码',
			trigger: ['change']
		},
		'invite': {
			type: 'string',
			required: true,
			message: '请填写邀请码',
			trigger: ['change']
		},
		'nickname': {
			type: 'string',
			required: true,
			message: '请填写真实姓名',
			trigger: ['change']
		},
	
	})



const goLink =  (url) =>{
	uni.redirectTo({
		url:url
	})
}


	const submitForm = () => {

		loginform.value.validate().then(async () => {

			let reqdata = formState
			const { data:res } = await registerApi(reqdata)
			if (res.status == 1 ){
				uni.showToast({
					title:res.msg
				})
				jumpPage(`/pages/login/login?mobile=${formState.mobile}`)
			} 
	
		}).catch(errors => {})
	}
	
	onLoad ((options)=>{
		if (options.invite) {
		formState.invite = options.invite	
		}
	})
</script>

<style lang='scss' scoped>


	.form_state {
		padding: 0 30px;
		padding-top: 30px;
	}


	.input_item {
		border: none;
		border-bottom: 1px solid #F5F6F7;
	}
	.right_suffix {
		color: #fff;
		background-color: $common-red;
		padding: 0 10px;
		height: 25px;
		border-radius: 10px;
		display: flex;
		align-items: center;
	}

	.submit_btn {
		background: $common-red;
		color: #fff;
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		font-size: 16px;
	}

	.center_view {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
</style>